<template>
    <el-form 
      ref="ruleFormRef"
      class="auth-form"
      :model="form"
      :rules="rules"
      @submit.prevent="handleSubmit(ruleFormRef)"
    >

     <!-- 标题 start-->
     <div class="form-header">
      <h1 class="system-title">
        <el-icon class="title-icon"><Notebook /></el-icon>
        教育平台系统
      </h1>
      <p class="system-subtitle">专业教育平台解决方案</p>
    </div>
    <!-- 标题 end-->
         <!-- 身份选择 start-->
         <el-form-item prop="role">
      <el-radio-group 
        v-model="form.role"
        size="large"
        class="role-radio-group"
      >
        <el-radio-button label="student">学生</el-radio-button>
        <el-radio-button label="teacher">教师</el-radio-button>
        <el-radio-button label="admin">管理员</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <!-- 身份选择 end -->
      <transition-group name="list" tag="div">
        <el-form-item key="username" prop="username">
          <el-input
            v-model="form.username"
            placeholder="用户名"
            prefix-icon="User"
            size="large"
          />
        </el-form-item>
  
        <el-form-item key="password" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="密码"
            prefix-icon="Lock"
            show-password
            size="large"
          />
        </el-form-item>

         <!-- 验证码输入部分 -->
    <el-form-item prop="captcha">
      <el-row :gutter="16" class="captcha-row">
        <el-col :span="16">
          <el-input
            v-model="form.captcha"
            placeholder="请输入验证码"
            prefix-icon="Key"
            size="large"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="8">
          <img
          ref="captchaImg"
          :src="'api/auths/captcha'"
          style="margin-left: 20px; height: 47px;cursor: pointer;"
          alt=""
          @click="getVerify"
        />
        </el-col>
      </el-row>
    </el-form-item>

    
  
        <el-form-item key="submit">
          <el-button
            type="primary"
            size="large"
            native-type="submit"
            class="submit-btn"
            :loading="submitBtnStatus"
          >
            登录
          </el-button>
        </el-form-item>
      </transition-group>
    </el-form>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { Notebook } from '@element-plus/icons-vue'
  import  {type FormInstance,type FormRules,ElMessage } from 'element-plus'
  import {useUserStore} from '@/store/user'
import { verifyCode } from '../../api/auth'
import { Encrypt } from "@/utils/Secret";
  // 用户pinia对象
  const userStore = useUserStore()
  // 获取路由器对象
  const router = useRouter()
  // 表单实例
  const ruleFormRef = ref<FormInstance>()
  const form = reactive({
    role: 'student', 
    username: 'admin',
    password: '123456',
    captcha: ''
  })

  // 登录按钮状态
  const submitBtnStatus = ref(false)
  
  const rules :FormRules = {
    role: [
    { required: true, message: '请选择登录身份', trigger: 'change' }
  ],
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 6, message: '验证码长度4-6位', trigger: 'blur' }
  ]
  }


// 获取验证码逻辑
const captchaImg = ref<HTMLImageElement>()
const getVerify = () => {
  captchaImg.value!.src = 'api/auths/captcha?t='+Date.now()
}
  
// 提交登录信息
  const handleSubmit = async(formEl: FormInstance | undefined) => {
    
    if (!formEl) return
  await formEl.validate(async(valid) => {
    if (valid) {
      // 校验验证码
    const captchaResult = await verifyCode(form.captcha)
    if (captchaResult.code!=1) {
      ElMessage.error(captchaResult.msg)
      return
    }
      submitBtnStatus.value = true
      // 给登录密码加密
      form.password = Encrypt(form.password)
      const res = await userStore.login(form)
     if (res.code === 1) {
      ElMessage.success(res.msg)
      // 登录成功,3秒后跳转
      setTimeout(() => {
        submitBtnStatus.value = false
        // 根据角色跳转到不同页面
    switch (form.role) {
        case 'student':
          router.push('/personalcenter')
          break
        case 'teacher':
          router.push('/personalcenter')
          break
        case 'admin':
          router.push('/system/user')
          break
        default:
          router.push('/')
      }
      }, 3000)
      
     }else{
      ElMessage.error(res.msg)
      // 开启按钮
      submitBtnStatus.value = false
     }
      
    } else {
      ElMessage.error('请输入完整信息')
    }
  })
  }
  </script>
  
  <style lang="scss" scoped>
  .auth-form {


    .form-header {
  text-align: center;
  margin-bottom: 40px;
  animation: titleEnter 0.6s ease;

  .system-title {
    color: #303133;
    font-size: 28px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    .title-icon {
      font-size: 36px;
      color: #409EFF;
    }
  }

  .system-subtitle {
    color: #909399;
    font-size: 16px;
    letter-spacing: 2px;
  }
}


/* 标题进入动画 */
@keyframes titleEnter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 角色选择 start
.role-radio-group {
  width: 100%;
  margin-bottom: 20px;
  
  :deep(.el-radio-button) {
    flex: 1;
    text-align: center;

    // 按钮样式
    .el-radio-button__inner {
      width: 100%;
      transition: all 0.3s ease;
      border-radius: 8px;
      border: 1px solid #ebeef5;
      background: #f5f7fa;
    }

    // 选中状态
    &.is-active {
      .el-radio-button__inner {
        background: var(--el-color-primary-light-9);
        border-color: var(--el-color-primary-light-5);
        color: var(--el-color-primary);
        box-shadow: none;
      }
    }

    // 悬停状态
    &:hover:not(.is-active) {
      .el-radio-button__inner {
        border-color: var(--el-color-primary-light-5);
      }
    }
  }
}
// 角色选择 end

    .el-form-item {
      margin-bottom: 25px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    .submit-btn {
      width: 100%;
      font-size: 16px;
      letter-spacing: 2px;
      height: 48px;
    }
  }
  
  .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
    position: absolute;
  }
  
  .list-enter-from {
    opacity: 0;
    transform: translateY(20px);
  }
  
  .list-leave-to {
    opacity: 0;
    transform: translateY(-20px);
  }
  
  .list-move {
    transition: transform 0.3s ease;
  }
  </style>